<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <title>好汉榜vue+Ajax</title>
</head>
<body>
<div id="app">
    <%--{{haohans}}--%>
    <table border="2">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
        <tr v-for="(value,key) in haohans">
            <td>{{key}}</td>
            <td>{{value}}</td>
            <td><button v-on:click="edit(key,value)">修改</button><button v-on:click="del(key)">删除</button></td>
        </tr>


    </table>
    <form method="post" name="form1" action="haohanServlet">
        序号:<input name="id" v-model="id" id="id" type="text" />
        姓名:<input name="name" id="name" v-model="name" type="text" />
        <button type="button"  v-on:click="tianjia()">提交</button>
    </form>
</div>
<script>
    var vue=new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            haohans: {},
            inited: true
        },
        methods: {
            //添加
            tianjia:function(){
                var data = {};
                data.id = this.id;
                data.name = this.name;
                var url='/HaohanVueAjax/haohanServlet';
                axios.post(url,data).then(function(result){
                    console.log(result);
                    if(vue.inited){
                        vue.inited=false;
                        vue.haohans=result.data.haohans;
                        return;
                    }
                    if(result.data.msg.indexOf('该英雄已存在')>=0){
                        alert('添加失败');
                    }else{
                        alert('添加成功');
                        vue.inited=false;
                        vue.haohans=result.data.haohans;
                    }
                    vue.id="";
                    vue.name="";
                }).catch(function(err){
                    console.log(err);
                });
            },
            //修改
            edit:function(key,value) {

                this.id = key;
                this.name = value;
            },
    // 使用键值对提交参数
    // 键值对的格式:useranem=zhangsan&pwd=123456
    // var paras=new URLSearchParams();
    // paras.append("username",this.username);
    // paras.append("pwd",this.pwd);
    // paras.append("users",this.users);
            //删除
            del:function(key){
                //alert(key);
                var data = "id="+key;
                var url='/HaohanVueAjax/delServlet';
                axios.post(url,data).then(function(result){
                    console.log(result);
                    if(result.data.msg.indexOf('该英雄已删除')>=0){
                        vue.haohans=result.data.haohans;
                        alert('删除成功');
                    }else{
                        alert('删除失败');
                    }
                }).catch(function(err){
                    console.log(err);
                });
            }
        },
        mounted: function () {
            console.log('init');
            this.tianjia();
        }
    });
</script>
</body>
</html>

